<template>
  <div id="company">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="公司名称">
        <el-input v-model="formInline.companyName" placeholder="职位名称"></el-input>
      </el-form-item>
      <el-form-item label="区间查询">
        <el-input v-model="formInline.startTime" placeholder="开始时间"></el-input>
      </el-form-item>
      <el-form-item label="-">
        <el-input v-model="formInline.endTime" placeholder="结束时间"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button @click="openSave">添加公司</el-button>
    <el-button @click="deleteCompany">删除公司</el-button>
    <template>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection">
        </el-table-column>
        <el-table-column
          prop="companyId"
          label="公司id">
        </el-table-column>
        <el-table-column
          prop="softwareName"
          label="渠道来源"
          width="80">
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="公司名称">
          <template slot-scope="scope">
            <span v-html="scope.row.companyName"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="companyAddress"
          label="公司地址">
        </el-table-column>
        <el-table-column
          prop="companyImg"
          label="公司图片"
          width="100">
          <template slot-scope="scope">
            <img v-if="scope.row.companyImg!=null&&scope.row.companyImg!=''" :src="scope.row.companyImg" width="40px"
                 height="40px">
            <span v-if="scope.row.companyImg==null||scope.row.companyImg==''">暂无照片</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="companyTel"
          label="公司电话"
          width="150">
          <template slot-scope="scope">
            {{scope.row.companyTel!=null&&scope.row.companyTel!=''?scope.row.companyTel:"暂无手机号"}}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit( scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">查看详细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="parseInt(number)"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="parseInt(size)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="parseInt(total)">
    </el-pagination>
    <el-dialog title="添加公司" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="渠道来源" :label-width="formLabelWidth">
          <el-select v-model="form.softwareId" placeholder="请选择">
            <el-option
              v-for="i in softwareList"
              :key="i.softwareId"
              :label="i.softwareName"
              :value="i.softwareId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司名称" :label-width="formLabelWidth">
          <el-input v-model="form.companyName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司介绍" :label-width="formLabelWidth">
          <el-input type="textarea" :rows="8" placeholder="请输入内容"
                    v-model="form.companyRecommend"></el-input>
        </el-form-item>
        <el-form-item label="公司地址" :label-width="formLabelWidth">
          <el-input v-model="form.companyAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司图片" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            action="http://localhost:8500/job/company/uploadFile"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-success="getFileName"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="公司电话" :label-width="formLabelWidth">
          <el-input v-model="form.companyTel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司官网" :label-width="formLabelWidth">
          <el-input v-model="form.companyUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-button @click="saveCompanyJob(form.list)">添加岗位</el-button>
        <template>
          <el-table
            :data="form.list"
            border
            style="width: 100%">
            <el-table-column
              prop="jobName"
              label="职位">
              <template slot-scope="scope">
                <el-select v-model="scope.row.jobId" placeholder="请选择">
                  <el-option
                    v-for="i in jobList"
                    :key="i.jobId"
                    :label="i.jobName"
                    :value="i.jobId">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="jobNum"
              label="招收人数"
              width="153">
              <template slot-scope="scope">
                <el-input-number :min="parseInt(1)" :max="parseInt(99)" size="mini"
                                 v-model="scope.row.jobNum"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              prop="jobSalary"
              label="职位工资(单位:元)"
              width="155">
              <template slot-scope="scope">
                <el-input-number :min="parseInt(1000)" :max="parseInt(99999)" size="mini"
                                 v-model="scope.row.jobSalary"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              prop="salaryNum"
              label="职位年薪发放月数">
              <template slot-scope="scope">
                <el-input-number :min="parseInt(1)" :max="parseInt(99)" size="mini"
                                 v-model="scope.row.salaryNum"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              prop="companyNegotiable"
              label="是否面议"
              width="80">
              <template slot-scope="scope">
                <el-select v-model="scope.row.companyNegotiable" placeholder="请选择">
                  <el-option value="1" label="是">是</el-option>
                  <el-option value="0" label="否">否</el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCompany">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改公司" :visible.sync="updateCompany">
      <el-form :model="form">
        <el-form-item label="渠道来源" :label-width="formLabelWidth">
          <el-select v-model="form.softwareId" placeholder="请选择">
            <el-option
              v-for="i in softwareList"
              :key="i.softwareId"
              :label="i.softwareName"
              :value="i.softwareId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司名称" :label-width="formLabelWidth">
          <el-input v-model="form.companyName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司介绍" :label-width="formLabelWidth">
          <el-input type="textarea" :rows="8" placeholder="请输入内容"
                    v-model="form.companyRecommend"></el-input>
        </el-form-item>
        <el-form-item label="公司地址" :label-width="formLabelWidth">
          <el-input v-model="form.companyAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司图片" :label-width="formLabelWidth">
          <img v-if="form.companyImg!=null&&form.companyImg!=''" :src="form.companyImg" width="100px" height="200px">
          <span v-if="form.companyImg==null||form.companyImg==''">暂无照片</span>
          <el-upload
            class="upload-demo"
            action="http://localhost:8500/job/company/uploadFile"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-success="getFileName"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="公司电话" :label-width="formLabelWidth">
          <el-input v-model="form.companyTel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司官网" :label-width="formLabelWidth">
          <el-input v-model="form.companyUrl" autocomplete="off"></el-input>
        </el-form-item>
        <template>
          <el-table
            :data="form.list"
            border
            style="width: 100%">
            <el-table-column
              prop="jobName"
              label="职位">
              <template slot-scope="scope">
                <el-select v-model="scope.row.jobId" placeholder="请选择">
                  <el-option
                    v-for="i in jobList"
                    :key="i.jobId"
                    :label="i.jobName"
                    :value="i.jobId">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="jobNum"
              label="招收人数"
              width="153">
              <template slot-scope="scope">
                <el-input-number :min="parseInt(1)" :max="parseInt(99)" size="mini"
                                 v-model="scope.row.jobNum"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              prop="jobSalary"
              label="职位工资(单位:元)"
              width="155">
              <template slot-scope="scope">
                <el-input-number :min="parseInt(1000)" :max="parseInt(99999)" size="mini"
                                 v-model="scope.row.jobSalary"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              prop="salaryNum"
              label="职位年薪发放月数">
              <template slot-scope="scope">
                <el-input-number :min="parseInt(1)" :max="parseInt(99)" size="mini"
                                 v-model="scope.row.salaryNum"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              prop="companyNegotiable"
              label="是否面议"
              width="80">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.companyNegotiable">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateCompany = false">取 消</el-button>
        <el-button type="primary" @click="updateById">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="公司详细" :visible.sync="detail">
      <el-form :model="companyObject">
        <el-form-item label="渠道来源" :label-width="formLabelWidth">
          {{companyObject.softwareName}}
        </el-form-item>
        <el-form-item label="公司名称" :label-width="formLabelWidth">
          {{companyObject.companyName}}
        </el-form-item>
        <el-form-item label="公司介绍" :label-width="formLabelWidth">
          {{companyObject.companyRecommend}}
        </el-form-item>
        <el-form-item label="公司地址" :label-width="formLabelWidth">
          {{companyObject.companyAddress}}
        </el-form-item>
        <el-form-item label="公司图片" :label-width="formLabelWidth">
          <img v-if="companyObject.companyImg!=null&&companyObject.companyImg!=''" :src="companyObject.companyImg"
               width="100px" height="200px">
          <span v-if="companyObject.companyImg==null||companyObject.companyImg==''">暂无照片</span>
        </el-form-item>
        <el-form-item label="公司电话" :label-width="formLabelWidth">
          {{companyObject.companyTel!=null&&companyObject.companyTel!=''?companyObject.companyTel:"暂无手机号"}}
        </el-form-item>
        <el-form-item label="公司官网" :label-width="formLabelWidth">
          <a v-if="companyObject.companyUrl!='暂无网址'" :href="companyObject.companyUrl">{{companyObject.companyUrl}}</a>
          <a v-if="companyObject.companyUrl=='暂无网址'">{{companyObject.companyUrl}}</a>
        </el-form-item>
        <template>
          <el-table
            :data="companyObject.list"
            border
            style="width: 100%">
            <el-table-column
              prop="jobName"
              label="职位">
            </el-table-column>
            <el-table-column
              prop="jobNum"
              label="招收人数"
              width="100">
            </el-table-column>
            <el-table-column
              prop="jobSalary"
              label="职位工资(单位:分)">
              <template slot-scope="scope">
                {{scope.row.jobSalary/100}}
              </template>
            </el-table-column>
            <el-table-column
              prop="salaryNum"
              label="职位年薪发放月数">
            </el-table-column>
            <el-table-column
              prop="companyNegotiable"
              label="是否面议"
              width="80">
              <template slot-scope="scope">
                {{scope.row.companyNegotiable==0?"否":"是"}}
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间">
            </el-table-column>
          </el-table>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detail = false">取 消</el-button>
        <el-button type="primary" @click="detail = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    findAllCompanyStudent,
    cacheJob,
    softwareCache,
    saveCompany,
    deleteCompany,
    updateCompany
  } from '../../api/way.js'

  export default {
    data() {
      return {
        updateCompany: false,
        form: {
          companyName: '',
          companyRecommend: "",
          companyAddress: "",
          companyImg: "",
          companyTel: "",
          companyUrl: "",
          softwareId: '',
          list: []
        },
        dialogFormVisible: false,
        formLabelWidth: '180px',
        tableData: [],
        number: 1,
        size: 5,
        total: 0,
        companyObject: {},
        detail: false,
        multipleSelection: [],
        fileList: [],
        jobList: [],
        softwareList: [],
        formInline: {
          companyName: '',
          startTime: '',
          endTime: '',
        },
      }
    },
    methods: {
      onSubmit() {
        let param = {
          "current": 1,
          "size": this.size,
          "paramMap": {
            "companyName": this.formInline.companyName,
            "startTime": this.formInline.startTime,
            "endTime": this.formInline.endTime,
          }
        }
        findAllCompanyStudent(param).then(res => {
          console.log(res.data);
          this.tableData = res.data.records
          this.total = res.data.total
          this.number = res.data.current
          this.size = res.data.size
        })
      },
      saveCompanyJob(list) {
        let param = {
          "companyId": '',
          "jobId": '',
          "jobNum": 1,
          "jobSalary": '',
          "salaryNum": '',
          "companyNegotiable": '',
        }
        list.push(param)
      },
      updateById() {
        updateCompany(this.form).then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.updateCompany = false
          } else {
            this.$message.error(res.msg);
          }
        })
      },
      openSave() {
        this.form = {
          companyName: '',
          companyRecommend: "",
          companyAddress: "",
          companyImg: "",
          companyTel: "",
          companyUrl: "",
          softwareId: '',
          list: []
        }
        this.dialogFormVisible = true
      },
      getFileName(response) {
        console.log(response);
        this.form.companyImg = response.data
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      deleteCompany() {
        let param = {"ids": this.multipleSelection}
        deleteCompany(param).then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.handleCurrentChange(1)
          } else {
            this.$message.error(res.msg);
          }
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var i in val) {
          this.multipleSelection.push(val[i].companyId)
        }
      },
      handleEdit(row) {
        this.fileList = []
        this.form = {}
        this.form = row
        console.log(this.form);
        this.updateCompany = true
      },
      handleDelete(row) {
        this.companyObject = {}
        this.companyObject = row
        console.log(row);
        this.detail = true
      },
      saveCompany() {
        saveCompany(this.form).then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            location.reload()
          } else {
            this.$message.error(res.msg);
          }
        })
      },
      handleSizeChange(val) {
        let param = {
          "current": 1,
          "size": val,
          "paramMap": {
            "companyName": this.formInline.companyName,
            "startTime": this.formInline.startTime,
            "endTime": this.formInline.endTime,
          }
        }
        findAllCompanyStudent(param).then(res => {
          this.tableData = res.data.records
          this.total = res.data.total
          this.number = res.data.current
          this.size = res.data.size
        })
      },
      handleCurrentChange(val) {
        let param = {
          "current": val,
          "size": this.size,
          "paramMap": {
            "companyName": this.formInline.companyName,
            "startTime": this.formInline.startTime,
            "endTime": this.formInline.endTime,
          }
        }
        findAllCompanyStudent(param).then(res => {
          this.tableData = res.data.records
          this.total = res.data.total
          this.number = res.data.current
          this.size = res.data.size
        })
      }
    },
    mounted() {
      let param = {
        "current": this.number,
        "size": this.size,
        "paramMap": {}
      }
      findAllCompanyStudent(param).then(res => {
        console.log(res.data.data);
        this.tableData = res.data.records
        this.total = res.data.total
        this.number = res.data.current
        this.size = res.data.size
      })
      cacheJob().then(res => {
        console.log(res.data);
        this.jobList = res.data
      })
      softwareCache(param).then(res => {
        console.log(res.data);
        this.softwareList = res.data
      })
    }
  }
</script>

<style scoped>

</style>
